<template>
  <el-row>
    <h2 align="center">图书管理页面</h2>
    <el-row>
      <el-col :span="2"><p></p></el-col>
      <el-col :span="22">
        <el-form
          :inline="true"
          :model="searchForm"
          size="mini"
          class="demo-form-inline"
        >
          <el-form-item label="关键字">
            <el-input
              clearable
              v-model="searchForm.keyword"
              placeholder="请输入关键字"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleSubmitSearchForm"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="success"
              icon="el-icon-plus"
              @click="handleSaveOrEdit"
              >新增</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2"><p></p></el-col>
      <el-col :span="22">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="ID" prop="id" />
          <el-table-column label="名称" prop="name" />
          <el-table-column label="作者" prop="author" />
          <el-table-column label="编号" prop="sn" />
          <el-table-column label="价格" prop="price" />
          <el-table-column label="描述" prop="des" />
          <el-table-column prop="createdTime" label="发布日期" width="180">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleSaveOrEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-pagination
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchForm.current"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-row>
    <el-dialog
      :title="dialogTitle"
      width="40%"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="editForm">
        <el-form-item label="名称" label-width="60px">
          <el-input v-model="editForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="作者" label-width="60px">
          <el-input v-model="editForm.author" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="编号" label-width="60px">
          <el-input v-model="editForm.sn" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" label-width="60px">
          <el-input v-model="editForm.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" label-width="60px">
          <el-input
            type="textarea"
            :rows="2"
            v-model="editForm.des"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>

<script>
import axios from "axios";
export default {
  name: "Book",
  data() {
    return {
      dialogFormVisible: false,
      tableData: [],
      editForm: {},
      dialogTitle: "图书新增",
      searchForm: {
        current: 1,
        pageSize: 5,
        keyword: "",
      },
      total: 0,
    };
  },
  methods: {
    handleDelete(index, row) {},
    async fetchData() {
      const { data } = await axios({
        url: "/book/list",
        method: "get",
        params: this.searchForm,
      });
      this.total = data.data.total;
      this.tableData = data.data.list;
      this.searchForm.current = data.data.pageNum;
      this.searchForm.pageSize = data.data.pageSize;
    },
    handleSaveOrEdit(row) {
      this.editForm = {};
      this.dialogFormVisible = true;
      this.editForm = { ...row };
      this.dialogTitle = row.id ? "图书编辑" : "图书新增";
    },
    handleSubmit() {
      this.dialogFormVisible = false;
      axios({
        url: "/book/saveOrUpdate",
        method: "post",
        data: this.editForm,
      }).then((res) => {
        this.$message.success("操作成功！");
        this.fetchData();
      });
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios({
            url: `/book/delete/${row.id}`,
            method: "get",
          }).then((res) => {
            this.$message.success("删除成功!");
            this.fetchData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(pageSize) {
      this.searchForm.pageSize = pageSize;
      this.fetchData();
    },
    handleCurrentChange(current) {
      this.searchForm.current = current;
      this.fetchData();
    },
    handleSubmitSearchForm() {
      this.fetchData();
    },
  },
  created() {
    this.fetchData();
  },
};
</script>

<style>
</style>